import React from 'react';
import { Form, Input, Button, Flex, App } from 'antd';
import { useNavigate } from 'react-router';
import { LeftOutlined } from '@ant-design/icons';

import { unique, register } from '../../apis/user';

const Credential = ({ email, setCurrentStep }) => {
  const navigate = useNavigate(); // 用于 React Router 跳转
  const [form] = Form.useForm();
  const { message } = App.useApp();

  // 提交表单
  const registerUser = async ({username, password}) => {
    const res = await register({
      username,
      password,
      email
    })
    if(res.success){
      message.success('注册成功');
      navigate('/home');
    }
  };

  return (
    <Flex vertical style={{ width: '400px', margin: '20px auto' }}>
      {/* 返回按钮 */}
      {/*<Button type='link' icon={<LeftOutlined />} style={{ marginBottom: '20px' }}>*/}
      <Button
        type='default'
        onClick={() => setCurrentStep(0)}
        style={{ marginBottom: '24px', width: 'fit-content' }}>
        <LeftOutlined/>上一步
      </Button>

      {/* 表单内容 */}
      <Form form={form} layout='vertical' onFinish={registerUser}>
        {/* 邮箱输入框 + 获取验证码按钮 */}
        <Form.Item
          name='username'
          validateTrigger='onBlur'
          rules={[
            { required: true, message: '请输入用户名' },
            { min: 6, max: 20, message: '用户名必须在6到20位' },
            () => ({
              validator(_, username) {
                return unique({ username })
                  .then(res => {
                    if (!res.data.exist) {
                      return Promise.resolve();
                    } else {
                      return Promise.reject('用户名已经被注册');
                    }
                  });
              },
            })
          ]}
        >
          <Input placeholder='请输入用户名'/>
        </Form.Item>

        {/* 密码输入框 */}
        <Form.Item
          name='password'
          validateTrigger='onBlur'
          rules={[
            { required: true, message: '密码不能为空' },
            { min: 6, max: 20, message: '密码必须在6到20位' }
          ]}
        >
          <Input
            type='password'
            placeholder='请输入密码'
          />
        </Form.Item>

        {/* 密码相同校验 */}
        <Form.Item
          name='checkPassword'
          type='password'
          validateTrigger='onBlur'
          rules={[
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue('password') === value) {
                  return Promise.resolve();
                }
                return Promise.reject(new Error('两次输入密码不一致'));
              },
            })
          ]}
        >
          <Input
            type='password'
            placeholder='请再次输入密码'
          />
        </Form.Item>

        {/* 注册按钮 */}
        <Form.Item>
          <Button
            type='primary'
            htmlType='submit'
            style={{ width: '100%' }}
          >
            注册
          </Button>
        </Form.Item>
      </Form>
    </Flex>
  );
};

export default Credential;
